<template>
	<gui-page :refresh="true" @reload="reload" :loadmore="true" @loadmorefun="loadData"
		:apiLoadingStatus="apiLoadingStatus" ref="guipage">
		<template v-slot:gFixedTop>
			<gui-a-header :title="headerTitle"></gui-a-header>
			<view class="header" id="header">
				<view class="search flex-ac-jb">
					<view class="flex1">
						<gui-search2 :customClass="['bgfff','border']" :kwd="query.title" @confirm="confirm"
							@clear="clear" @inputting="inputting" height="53rpx" borderRadius="14rpx"
							placeholder="输入关键字，搜索您想要的" placeholderClass="plStyle"></gui-search2>
					</view>
				</view>
				<view class="nav bgfff gui-flex gui-align-items-center">
					<view class="nav_item c999">
						<picker @change="workAreaPickerChange" :value="workAreaIndex" :range="workAreaArr"
							range-key="dictLabel">
							<view class="val">
								<view class="uni-input" v-if="workAreaIndex == 0">招聘会地点<text
										class="gui-icons">&#xe661;</text></view>
								<view class="uni-input" v-else>{{workAreaArr[workAreaIndex].dictLabel}}<text
										class="gui-icons">&#xe661;</text></view>
							</view>
						</picker>
					</view>
					<view class="nav_item f24 c999">
						<picker @change="statusPickerChange" :value="statusIndex" :range="statusArr"
							range-key="dictLabel">
							<view class="val">
								<view class="uni-input" v-if="statusIndex == 0">招聘会状态<text
										class="gui-icons">&#xe661;</text></view>
								<view class="uni-input" v-else>{{statusArr[statusIndex].dictLabel}}<text
										class="gui-icons">&#xe661;</text></view>
							</view>
						</picker>
					</view>
					<view class="nav_item f24 c999">
						<picker @change="typesPickerChange" :value="typesIndex" :range="typesArr" range-key="dictLabel">
							<view class="val">
								<view class="uni-input">{{typesArr[typesIndex].dictLabel}}<text
										class="gui-icons">&#xe661;</text></view>
							</view>
						</picker>
					</view>
				</view>
			</view>
		</template>
		<template v-slot:gBody>
			<view class="training-list">
				<view v-if="loading">
					<view class="news-list gui-flex gui-rows gui-space-between gui-nowrap" v-for="(itm, index) in 10"
						:key="index">
						<view class="skeleton">
							<gui-skeleton :canShow="false"
								customStyle="height:388rpx; border-radius:6rpx;"></gui-skeleton>
						</view>
					</view>
				</view>
				<gui-empty v-if="noData">
					<template v-slot:img>
						<view class="gui-flex gui-rows gui-justify-content-center">
							<image class="nodata-img" src="../../static/image/no_curriculum_vitae.png" mode="widthFix">
							</image>
						</view>
					</template>
					<template v-slot:text>
						<text class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">暂无数据</text>
					</template>
				</gui-empty>
				<view class="training-item radius" @tap="jumpDetails(item)" v-for="(item,index) in dataList"
					:key="item.id">
					<view class="title flex">
						<view class="title-label flex-ac-jc f24 cfff" :class="[(item.shJinXing == 2) ? 'js_bg' : 'defult_bg']" style="padding: 0 10rpx;">
							{{(item.shJinXing == 0) ? '预告' : (item.shJinXing == 1) ? '进行中' : '已结束' }}
						</view>
						<view class="gui-bold gui-flex1">{{item.title}}</view>
					</view>
					<view class="item-text flex-ac-row f24">
						<text class="item-text-label">招聘内容</text>
						<text>{{item.context}}</text>
					</view>
					<view class="item-text flex-ac-row f24">
						<text class="item-text-label">定展电话</text>
						<text>{{item.exhibitionPhone || '--'}}</text>
					</view>
					<view class="item-text flex-ac-row f24">
						<text class="item-text-label">举办地址</text>
						<text>{{item.holdConpany || '--'}}</text>
					</view>
					<view class="item-text flex-ac-row f24">
						<text class="item-text-label">参展职位</text>
						<text class="colorBlue">{{item.conpanyNum}}个</text>
					</view>
					<view class="item-text flex-ac-jb f24">
						<view class="left gui-flex">
							<text class="item-text-label">部分企业</text>
							<view class="img_list gui-flex">
								<view class="img_box" v-for="(cItem, cIndex) in item.comUsertConpanyInfoList"
									:key="cItem.id">
									<gui-image mode="aspectFill" :src="cItem.logo" borderRadius="10rpx" :width="65"
										:height="65"></gui-image>
								</view>

							</view>
						</view>
						<view class="show_details" v-if="pageType == 'my'">已报名</view>
						<view class="show_details" v-else>查看详情</view>
					</view>
				</view>
				<!-- <image src="../../static/index/tranning_bg.png" mode="widthFix"></image> -->
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	import {
		selectRecruitJob,
		myRecruitJob
	} from '@/api/user.js'
	import graceJS from "@/Grace6/js/grace.js"
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getSysDictTypeList
	} from '@/api/config.js';
	const $u = reactive(inject('$u'))
	const headerTitle = ref("线下招聘会");
	const guipage = ref(null);
	const pageType = ref('')

	const statusArr = ref([{
		dictLabel: '不限',
		dictValue: ''
	}, {
		dictLabel: '预告',
		dictValue: '0'
	}, {
		dictLabel: '进行中',
		dictValue: '1'
	}, {
		dictLabel: '已结束',
		dictValue: '2'
	}])
	const statusIndex = ref(0)
	const statusPickerChange = (e) => {
		statusIndex.value = e.detail.value;
		query.value.status = statusArr.value[e.detail.value].dictValue
		reload(false);
	}

	const typesIndex = ref(0)
	const typesArr = ref([{
		dictLabel: '市本级招聘会',
		dictValue: '1'
	}, {
		dictLabel: '县本级招聘会',
		dictValue: '2'
	}])
	const typesPickerChange = (e) => {
		console.log(e.detail.value);
		typesIndex.value = e.detail.value;
		query.value.type = typesArr.value[e.detail.value].dictValue
		reload(false);
	}

	const workAreaArr = ref([{
		dictLabel: '不限',
		dictValue: ''
	}])
	const workAreaIndex = ref(0)
	const workAreaPickerChange = (e) => {
		workAreaIndex.value = e.detail.value;
		query.value.holdConpany = workAreaArr.value[e.detail.value].dictValue
		reload(false);
	}

	const loading = ref(true);
	onLoad((option) => {
		if (option.type == 'my') {
			pageType.value = option.type;
			headerTitle.value = "我的招聘会";
			loadData()
		} else {
			loadData()
		}
		loadZd();
	})
	const apiLoadingStatus = ref(false)
	const dataList = ref([])
	const noData = ref(false);
	const query = ref({
		pageNum: 1,
		pageSize: 10,
		type: 1,
		title: '',
		holdConpany: '',
		status: ''
	})

	// 搜索框输入
	const inputting = (e) => {
		query.value.title = e;
	}
	// 搜索框确认
	const confirm = (e) => {
		console.log(e);
		query.value.title = e;
		reload(false);
	}
	// 搜索清空
	const clear = (e) => {
		query.value.title = '';
		reload(false);
	}

	const reload = (isRelod = true) => {
		query.value.pageNum = 1;
		loadData(isRelod);
	}
	const loadData = (isReload) => {
		let queryParam = Object.assign(query.value, {})
		const request = (pageType.value == 'my') ? myRecruitJob : selectRecruitJob;
		request(queryParam).then(res => {
			if (res.code == 200) {
				var resultArr = res.rows;
				let total = Math.ceil(res.total / queryParam.pageSize);
				if (queryParam.pageNum >= 2) {
					dataList.value = dataList.value.concat(resultArr);
					guipage.value.stoploadmore();
					if (queryParam.pageNum >= total) {
						guipage.value.nomore();
					}
				}else {
					dataList.value = [];
					dataList.value = resultArr;
					// 刷新
					if (isReload) {
						guipage.value.endReload();
					} else {
						guipage.value.stoploadmore();
					}
					(resultArr.length <= 0) ? noData.value = true: noData.value = false;
				}
				query.value.pageNum++;
			}
		}).finally(() => {
			loading.value = false;
		})
	}

	const loadZd = () => {
		getSysDictTypeList({
			dictType: ''
		}).then(res => {
			let result = res.data;
			workAreaArr.value = [{
				dictLabel: '不限',
				dictValue: ''
			}];
			result.forEach(item => {
				// 工作区域
				if (item.dictType == 'com_work_area') {
					workAreaArr.value.push(item)
				}
			})
		})
	}

	const jumpDetails = (item) => {
		$u.to(`/pages/recruit/recruit-details?recruitId=${item.id}`)
	}
</script>

<style lang="scss">
	.search {
		padding: 0rpx 34rpx 30rpx 34rpx;
		background: linear-gradient(180deg, #4072FE 0%, #4072FE 100%);

		.border {
			border: 1px solid #ccc;
		}
	}

	.img_box {
		margin-right: 10rpx;
	}

	.show_details {
		color: #D50000;
		padding-right: 20rpx;
	}

	.nav {
		box-sizing: border-box;
		padding: 20rpx 0;

		.nav_item {
			flex: 1;
			text-align: center;
		}
	}

	.news-list {
		margin-top: 25rpx;
	}

	.news-img {
		width: 200rpx;
		margin-right: 30rpx;
		overflow: hidden;
	}

	.skeleton {
		background: linear-gradient(90deg, #dfdfdf 25%, #e5e5e5 37%, #dddddd 63%);
	}
</style>